<template>
	<view class="voice-call-waiting" v-if="showVoiceCallWaiting">
		<image mode="aspectFill" class="bg" :src="avatar"></image>
		<view class="voice-call-waiting-box">
			<view class="user-avatar">
				<image :src="avatar">
				</image>
			</view>


			<view class="user-name">{{ userName }}</view>
			<view class="footer-btns">
				<view class="item" @click="hangUp">
					<image src="@/static/img/hang-up.png"></image>
				</view>
				<view class="item" @click="putThrough">
					<image src="@/static/img/put-through.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>
<script lang="ts">
	export default {
		name: "voice-call-waiting"
	}
</script>
<script lang="ts" setup>
	import { ref } from "vue";
	import { useImStore, useVoiceCallStore, useUserStore } from '@/store';
	import useRouter from "@/hooks/useRouter"
	const page = getCurrentPages();
	const imStore = useImStore();
	const userStore = useUserStore();
	const voiceCallStore = useVoiceCallStore();
	const router = useRouter();
	const showVoiceCallWaiting = ref(false);
	const avatar = ref("")
	const userName = ref("")
	const userData : any = ref(null)
	// 挂断电话 
	const hangUp = () => {
		showVoiceCallWaiting.value = false;
		// 超过接听时长 提示 超时 关闭
		let sendData = {
			data: 'voice-call',
			description: '',
			extension: JSON.stringify({
				roomId: voiceCallStore.currentCall.roomId,
				text: "已拒绝",
				show: 'true'
			})
		}
		imStore.sendMessage(sendData, 'custom', userData.value.userID)
		uni.$emit('on-clear-timeout-id')
		voiceCallStore.editCallStoreData({
			isCallIng: false,
		});
		voiceCallStore.stopVoiceCallAudio();
		if (page[page.length - 1].route == 'pages/my/my' || page[page.length - 1].route == 'pages/im/im' || page[page.length - 1].route == 'pages/lawyer/lawyer' || page[page.length - 1].route == 'pages/index/index') {
			uni.showTabBar();
		}


	}
	// 接通电话
	const putThrough = () => {
		uni.$emit('on-clear-timeout-id')
		voiceCallStore.stopVoiceCallAudio();
		showVoiceCallWaiting.value = false;
		if (page[page.length - 1].route == 'pages/my/my' || page[page.length - 1].route == 'pages/im/im' || page[page.length - 1].route == 'pages/lawyer/lawyer' || page[page.length - 1].route == 'pages/index/index') {
			uni.showTabBar();
		}
		router.push({
			url: '/im/video-call/video-call',
			params: {
				roomId: voiceCallStore.currentCall.roomId,
				myId: userStore.uuid,
				userId: userStore.uuid,
				friendId: userData.value.userID,

			}
		});
	}
	uni.$on('open-voice-call-waiting', (data) => {
		console.log("打开带接听页面");
		avatar.value = data.avatar;
		userName.value = data.userName;
		userData.value = data.userData;
		showVoiceCallWaiting.value = true;

		// 隐藏tabbar

		if (page[page.length - 1].route == 'pages/my/my' || page[page.length - 1].route == 'pages/im/im' || page[page.length - 1].route == 'pages/lawyer/lawyer' || page[page.length - 1].route == 'pages/index/index') {
			uni.hideTabBar();
		}
	})
	uni.$on('close-voice-call-waiting', (data) => {
		showVoiceCallWaiting.value = false;
		// 隐藏tabbar
		if (page[page.length - 1].route == 'pages/my/my' || page[page.length - 1].route == 'pages/im/im' || page[page.length - 1].route == 'pages/lawyer/lawyer' || page[page.length - 1].route == 'pages/index/index') {
			uni.showTabBar();
		}
	})
	defineExpose({});
</script>

<style lang="scss" scoped>
	.voice-call-waiting {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;

		>image {
			height: 100%;
			width: 100%;
		}

		&-box {
			background: rgba(0, 0, 0, .7);
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;

			.user-avatar {
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
				overflow: hidden;
				margin: 0 auto;
				margin-top: 200rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.user-name {
				font-size: 40rpx;
				color: #fff;
				text-align: center;
				margin-top: 40rpx;
			}

			.footer-btns {
				position: absolute;
				bottom: 300rpx;
				left: 0;
				width: 100%;
				display: flex;
				justify-content: space-around;
				color: #FFF;

				.item {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;

					>image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>